import React, { ReactElement, useState, useEffect } from 'react';
import { ScrollView } from 'react-native';
import { NavigationScreenProps } from 'react-navigation';
import { OrderApi } from '../../api';
import { Data as CourseOrderInfo } from '../../api/order/getCourseOrderDetail';
import { Data as DepositOrderInfo } from '../../api/order/getDepositOrderDetail';
import NavBar from '../../components/NavBar';
import Notch, { NotchType } from '../../components/Notch';
import { ORDER_TYPE } from '../OrderList/constant';
import CourseOrder from './components/CourseOrder';
import DepositOrder from './components/DepositOrder';
import OriginOrder from './components/OriginOrder';

import styles from './style';

export default (props: NavigationScreenProps): ReactElement => {
  const { navigation } = props;
  const orderId = navigation.getParam('orderId');
  const type = navigation.getParam('type');

  const [courseOrder, setCourseOrder] = useState<CourseOrderInfo | null>(null);
  const [depositOrder, setDepositOrder] = useState<DepositOrderInfo | null>(
    null
  );

  useEffect((): void => {
    if (type === ORDER_TYPE.Course) {
      OrderApi.getCourseOrderDetail({ orderId }).then((res): void => {
        if (res.code === 0) {
          setCourseOrder(res.data);
        }
      });
    } else if (type === ORDER_TYPE.Deposit) {
      OrderApi.getDepositOrderDetail({ orderId }).then((res): void => {
        if (res.code === 0) {
          setDepositOrder(res.data);
        }
      });
    }
  }, [type]);

  return (
    <Notch style={styles.container} type={NotchType.Top}>
      <NavBar title="订单详情" needLine />
      <ScrollView
        contentContainerStyle={styles.scroll}
        style={{ backgroundColor: '#F8F8F8' }}
      >
        {type === ORDER_TYPE.Commodity && <OriginOrder />}
        {type === ORDER_TYPE.Course && !!courseOrder && (
          <CourseOrder orderId={orderId} {...courseOrder} />
        )}
        {type === ORDER_TYPE.Deposit && !!depositOrder && (
          <DepositOrder orderId={orderId} {...depositOrder} />
        )}
      </ScrollView>
    </Notch>
  );
};
